<!DOCTYPE HTML>
<html>
<head>
	<style>
		th,td {
			border:1px solid black
		}
		tr {
			background-color: #DCE6F5			
		}
		.row-style-0 {
			background-color: #FFFFFF
		}
		.row-style-1 {
			background-color: #DBE8F2		
		}
	</style>
	<script>
		let carTypeButtons = null;
		window.onload = ()=>{
			carTypeButtons = document.querySelectorAll(".carType");
			carTypeButtons.forEach(btn =>{
				btn.onclick = ()=>{
					showValue(btn.value);
				}
			});
		}

		//浅层展示数据
		function showValue(carType){
			let data = getValue(carType);
			//清除表格既有信息
			unRenderTable();
			render(data);
		}

		//从后台调取数据
		function getValue(carType){
			return [
					{
						infoDesc:['useage','partNumber','partName','supplier','PE','SQE','draftWeight','EPLWeight','standard'],
						info:[`${carType} ALL`,'23533145','前上防撞杆总成','青岛洪金汽车部件有限公司','郝雪玲','王晓红','6.04','6.01'],
						OTS:[5.75,5.73,5.78,5.80,5.75],
						SOP:[5.75,5.74,5.76,5.77,5.74,5.75],
						standard:'5.76±0.3',
						correctionRecord : [{time : '2022-12-02' , weight: 5.6, description:'横梁降本'}]
					},
					{
						infoDesc:['useage','partNumber','partName','supplier','PE','SQE','draftWeight','EPLWeight','standard'],
						info:[`${carType} ALL`,'23533145','前上防撞杆总成','青岛洪金汽车部件有限公司','郝雪玲','王晓红','6.04','6.01'],
						OTS:[5.75,5.73,5.78,5.80,5.75],
						SOP:[5.75,5.74,5.76,5.77,5.74,5.75],
						standard:'5.76±0.3',
						correctionRecord : [{time : '2022-12-02' , weight: 5.6, description:'M20B项目封样'}]
					},
					{
						infoDesc:['useage','partNumber','partName','supplier','PE','SQE','draftWeight','EPLWeight','standard'],
						info:[`${carType} ALL`,'23533145','前上防撞杆总成','青岛洪金汽车部件有限公司','郝雪玲','王晓红','6.04','6.01'],
						OTS:[5.75,5.73,5.78,5.80,5.75],
						SOP:[5.75,5.74,5.76,5.77,5.74,5.75],
						standard:'5.76±0.3',
						correctionRecord : []
					},
				];

		}

		//解析并渲染数据到页面，操作DOM
		function render(data){
			let table = document.querySelector('table');
			data.forEach((item,index) => {
				//添加空行
				let row = appendEmptyRow(table);
				let cells = row.cells;
				//序号
				cells[0].innerHTML = index + 1;
				//信息列
				for(let i = 0; i<item.info.length; i++){
					cells[i+1].innerHTML = item.info[i];
				}
				//OTS重量
				for(let i = 0; i<item.OTS.length; i++){
					cells[i+9].innerHTML = item.OTS[i];
				}
				//OTS均值
				cells[14].innerHTML = 
					((item.OTS.reduce((acc, val) => acc + val, 0))/item.OTS.length).toFixed(2);
				//SOP前6月
				for(let i = 0; i<item.SOP.length; i++){
					cells[i+15].innerHTML = item.SOP[i];
				}
				//console.log(formatString(item.correctionRecord));
				//修正记录
				cells[21].innerHTML = item.standard;
				cells[22].innerHTML = formatString(item.correctionRecord);
				
				
				//添加点击行跳转
				row.addEventListener('dblclick',()=>{
					window.location.href = `/weight-detail.html?pn=${cells[2].innerHTML}`;
				});
				
				//设置行样式
				row.classList.add(`row-style-${index%2}`);
			})

		}
		

		//清除表格既有信息
		function unRenderTable(){
			let table = document.querySelector('table');
			let rowNumber = table.rows.length;
			while(rowNumber > 1){
				table.deleteRow(rowNumber - 1);
				rowNumber--;
			}
		}
		
		//Append an Empty row and return all cells with array
		function appendEmptyRow(table){
				let row = table.insertRow(-1);
				//填充一行空白单元格
				for(let j = 0; j < table.rows[0].cells.length ; j++){
					row.insertCell(j);
				}
				return row;
		}
		
		//Format correctionRecord to string
		function formatString(crJSONArray){
			let str = '';
			if(crJSONArray.length > 0){
				for(crJSON of crJSONArray)
					str += `${crJSON.time}：${crJSON.description}，称重${crJSON.weight}；`;
			}
			return str;
		}

	</script>
</head>
<body>
<h1>青岛在产车型零部件重量监测表</h1>
<h1>
	<button class="carType" id="n350"  value="N350P">N350PPS</button>
	<button class="carType" id="n300"  value="N300P">N300PPS</button>
	<button class="carType" id="n300l" value="N300L">N300L</button>
	<button class="carType" id="n310"  value="N310">N310</button>
</h1>
<table>
  <tr>
  	<th>序号</th>
	<th>用法</th>
    <th>零件号</th>
    <th>零件名称</th>
    <th>总成供应商</th>
    <th>PE</th>
    <th>SQE</th>
    <th>图纸重量</th>
    <th>EPL重量</th>
    <th>OTS样件1重量</th>
    <th>OTS样件2重量</th>
    <th>OTS样件3重量</th>
    <th>OTS样件4重量</th>
    <th>OTS样件5重量</th>
    <th>OTS样件重量均值</th>
		<th>SOP+1月抽测</th>
		<th>SOP+2月抽测</th>
		<th>SOP+3月抽测</th>
		<th>SOP+4月抽测</th>
		<th>SOP+5月抽测</th>
		<th>SOP+6月抽测</th>
		<th>量产件标准（含公差）</th>
		<th>标准值修正记录</th>
  </tr>
</table>
</body>
</html>